<template>
  <div class="login">
    <div class="container">
      <div class="title">交通转运</div>
      <div class="ctitle">JIAOTONGZHUANYUN</div>
      <div class="content">
          <div class="icon">
            <img src="../../assets/images/user.png" alt="">
            <span>手机号</span>
          </div>
          <div>
            <input v-model="username" type="text" placeholder="请输入手机号">
          </div>
          <div class="icon">
            <img src="../../assets/images/password.png" alt="">
            <span>密码</span>
          </div>
          <div>
            <input v-model="password" type="password" placeholder="请输入密码">
          </div>
          <!-- <div class="flex">
            <input v-model="code" type="text" placeholder="请输入验证码">
            <img :src="image" alt="" @click="genVerifyCode">
          </div>
          <div> -->
              <van-button @click="login" type="primary" color="linear-gradient(to bottom, #285ee2, #1c4cbd)" block>登录</van-button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { genVerifyCode } from '@/api/gov/home'
import { userLoginMobile } from '@/api/traffic/traffic'

import Cookies from 'js-cookie'
import { Toast } from 'vant'
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      code: '',
      image: ''// 验证码图片
    }
  },
  created () {
    const key = localStorage.getItem('k')
    if (key) this.$router.push('/traffic_transship_list')
    // this.genVerifyCode() // 重新获取验证码
  },
  methods: {
    generateUUID () {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
      return uuid
    },
    // 获取cookie
    getCookie (cname) {
      var name = cname + '='
      var ca = document.cookie.split(';')
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i]
        console.log(c)
        while (c.charAt(0) == ' ') c = c.substring(1)
        if (c.indexOf(name) != -1) {
          return c.substring(name.length, c.length)
        }
      }
      return ''
    },
    // async genVerifyCode () {
    //   // Cookies.set('loginValidateCodeCookie', this.generateUUID())
    //   // console.log(this.generateUUID())
    //   const res = await genVerifyCode()
    //   console.log(res, '验证码')
    //   this.image = res.data.data
    // },
    login () {
      console.log(this.username, this.password)
      console.log(Cookies.get('loginValidateCodeCookie'))
      userLoginMobile({
        mobile: this.username,
        password: this.password
        // code: this.code,
        // key: Cookies.get('loginValidateCodeCookie')
      }).then(res => {
        console.log(res)
        // this.genVerifyCode() // 重新获取验证码
        if (res.data.errcode !== 0) return Toast.fail(res.data.errmsg || res.data.data.errmsg)
        localStorage.setItem('k', res.data.data.role)
        localStorage.setItem('driverId', res.data.data.id)
        this.$router.push('/traffic_transship_list')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login{
  font-weight: 500;
  background: url('../../assets/images/bg.png')no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .flex{
    display: flex;
    align-items: center;
    img{
      height: 62px;
    }
  }
  .container{
    width: 100%;
  }
  .title{
    text-align: center;
    color: white;
    font-size: 60px;
    margin-bottom: 20px;
  }
  .ctitle{
    color: white;
    text-align: center;
    margin-bottom: 70px;
    font-size: 32px;
  }
  .content{
    margin: 0 40px;
    background: white;
    border-radius: 5px;
    padding: 80px 60px;
    input::-webkit-input-placeholder{
      color:#1c4cc8;
    }
    input:-moz-placeholder{
      color:#1c4cc8;
    }
    input::-moz-placeholder{
      color:#1c4cc8;
    }
    input:-ms-input-placeholder{
      color:#1c4cc8;
    }
    input{
      width: 100%;
      border: none;
      border-bottom: 1px solid #abbacc;
      margin: 40px 0;
      padding-bottom: 20px;
      font-size: 32px;
      color: #3b59b2;
      font-weight: 400;
    }
    .icon{
      display: flex;
      align-items: center;
      img{
        width: 32px;
        height: 32px;
      }
      span{
        margin-left: 12px;
        font-size: 32px;
        color: #1c4cc8;
      }
    }
  }
}
</style>
